<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script>
        // 函数防抖 

        // 短时间内快速触发同一个事件 
        // 用下一次干掉上一次 永远执行最后一次  


        // 函数节流
        // 短时间内快速触发同一个事件 
        // 第一次执行的时候  不能重复触发  
        // 必须等到第一次结束   第二次才能触发 



        // 函数防抖
        // 最后一次触发的时候  才执行函数
        // const inp = document.querySelector('input');
        // inp.oninput = (function(timer){
        //     return function(){
        //         clearInterval(timer);
        //         timer = setInterval(() => {
        //             console.log(this.value)
        //         }, 300);
        //     }
        // })()

        
        // 节流
        // 只有第一个函数执行完毕  第二个函数才能执行
        inp.oninput = (function(flag){
            return function(){
                if( flag === false) return; 
                // 走到这里说明 是true 
                flag = false;

                timer = setTimeout(() => {
                    console.log(this.value)
                    flag = true;
                }, 300);

            }
        })(true);


        // 函数节流  
        // 同一时刻 只能执行一次函数 




    </script>
</body>
</html>